<template>
	<el-select class="fontSizeSelect" v-model="fontVal" placeholder="请选择" @change="fontChange" style="width: 90px;">
		<el-option v-for="item in fontList" :key="item.value" :label="item.label" :value="item.value">
			<span>{{ item.label }}</span>
		</el-option>
	</el-select>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, } from 'vue';
	export default {
		name: 'font-size-select',
		props: {
			fontSize: {
				type: String,
				default: '12'
			}
		},
		setup(props, {emit}) {
			const state = reactive({
				fontVal: '',
				fontList: [{
					value: '12',
					label: '12px'
				}, {
					value: '14',
					label: '14px'
				}, {
					value: '16',
					label: '16px'
				}, {
					value: '18',
					label: '18px'
				}, {
					value: '20',
					label: '20px'
				}, {
					value: '22',
					label: '22px'
				}, {
					value: '24',
					label: '24px'
				}, {
					value: '28',
					label: '28px'
				}, {
					value: '32',
					label: '32px'
				}, {
					value: '36',
					label: '36px'
				}, {
					value: '48',
					label: '48px'
				}, {
					value: '56',
					label: '56px'
				}, {
					value: '72',
					label: '72px'
				}]
			});
			
			// 获取类别
			const fontChange = (val) => {
				emit('update:fontSize', val);
			}
				
			onMounted(() => {
				state.fontVal = props.fontSize;
			})
			
			return {
				fontChange,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.fontSizeSelect {
		width: 100px;
	}
</style>
